<template>
  <div class="achievement-container">
    <div class="title"></div>
    <div class="infos">
      <div class="infos-content">
        <h5>深耕班</h5>
        <van-tabs v-model="active" animated>
          <van-tab v-for="(item,index) in kcCulture" :key="index" :title="item.name" :name="item.kc_id">
            <div style="margin-top:10px;">
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{kcCulture[index].today}}</div>
                  <div class="text">今日新增</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{kcCulture[index].yesterday}}</div>
                  <div class="text">昨日</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{kcCulture[index].this_week}}</div>
                  <div class="text">本周</div>
                </van-grid-item>
              </van-grid>
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{kcCulture[index].this_month}}</div>
                  <div class="text">本月</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{kcCulture[index].this_year}}</div>
                  <div class="text">本年</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{selfdata}}</div>
                  <div class="text">自定义</div>
                </van-grid-item>
              </van-grid>
            </div>
          </van-tab>
        </van-tabs>
        <div class="search-box">
          <van-cell title="选择日期区间" :value="date" @click="showTime(1)" is-link arrow-direction="down"></van-cell>
          <van-button type="primary" size="mini" icon="replay" @click="resultMethod(1)"></van-button>
        </div>
      </div>
      <div class="infos-content" style="margin-top:20px;">
        <h5>教子助手</h5>
        <van-tabs v-model="active1" animated>
          <van-tab v-for="(item,index) in kcJz" :key="index" :title="item.name" :name="item.kc_id">
            <div style="margin-top:10px;">
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{kcJz[index].today}}</div>
                  <div class="text">今日新增</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{kcJz[index].yesterday}}</div>
                  <div class="text">昨日</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{kcJz[index].this_week}}</div>
                  <div class="text">本周</div>
                </van-grid-item>
              </van-grid>
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{kcJz[index].this_month}}</div>
                  <div class="text">本月</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{kcJz[index].this_year}}</div>
                  <div class="text">本年</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{selfdata1}}</div>
                  <div class="text">自定义</div>
                </van-grid-item>
              </van-grid>
            </div>
          </van-tab>
        </van-tabs>
        <div class="search-box">
          <van-cell title="选择日期区间" :value="date1" @click="showTime(2)" is-link arrow-direction="down"></van-cell>
          <van-button type="primary" size="mini" icon="replay" @click="resultMethod(2)"></van-button>
        </div>
      </div>
    </div>
    <van-calendar :min-date="minDate" :max-date="maxDate" v-model="show" type="range" @confirm="onConfirm"></van-calendar>
  </div>
  </div>
</template>
  <script>
// import * as echarts from 'echarts';
import { Icon, Grid, GridItem, Cell, Calendar, Search, Switch, Tabs, Button,Tab} from 'vant';
import moment from 'moment';
export default {
  components: {
    [Icon.name]: Icon, [Grid.name]: Grid, [GridItem.name]: GridItem, [Cell.name]: Cell,
    [Calendar.name]: Calendar, [Search.name]: Search, [Switch.name]: Switch,
    [Tabs.name]: Tabs, [Button.name]: Button,[Tab.name]:Tab
  },
  data() {
    return {
      active: 0,
      active1: 0,
      show: false,
      minDate: new Date(new Date().getFullYear() - 2, 0, 1),
      maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      date: '请选择',
      date1: '请选择',
      value: '',
      checked: false,
      loading: false,
      startTime: '',
      endTime: '',
      tabIndex: 0,
      height: 0,
      detail1: {},
      detail: {},
      kc_id: '',
      listType: 1,
      selfdata: 0,
      selfdata1: 0,
      kcCulture:[],
      kcJz:[]
    };
  },

  created() {
    this.initAjaxMethod();
    this.id = this.$route.query.id;//作业id
  },
  methods: {
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.SET_PEROFFICE_PERFORMANCE)
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.kcCulture=Array.isArray(res.kc_culture)?res.kc_culture:[];
            this.kcJz=Array.isArray(res.kc_jz)?res.kc_jz:[];
          }
        });
    },
    formatDate: (date) => moment(date).format("YYYY-MM-DD"),
    showTime(flag) {
      this.listType = flag;
      this.show = true;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.searchMethod();
    },
    resultMethod(flag) {
      this.listType = flag;
      this.startTime = '';
      this.endTime = '';
      if (flag == 1) {
        this.selfdata = 0;
        this.date = '请选择';
      } else {
        this.selfdata1 = 0;
        this.date = '请选择';
      }
    },
    searchMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.SET_PEROFFICE_PERFORMANCESEARCH, {
          kc_id: this.listType == 1?this.kcCulture[this.active].kc_id:this.kcJz[this.active1].kc_id,
          start_time: this.startTime,
          end_time: this.endTime
        })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            if (this.listType == 1) {
              this.selfdata = res.data;
            } else {
              this.selfdata1 = data.data;
            }
          }
        });
    }
  }
};
  </script>
   
   <style lang="less">
   .achievement-container {
     .number{
       font-size: 0.4rem;
       font-weight: bold;
       color:#333;
     }
     .text{
       font-size:0.3rem;
       padding-top:0.08rem;
       color:#777;
     }
     .van-col {
       height: 0.72rem;
       line-height: 0.72rem;
       font-size:0.3rem;
       text-align: center;
     }
     .van-tab__text{
       font-size:0.3rem;
     }
     .van-row:nth-of-type(even) {
       background: #ccffff;
     }
     .infos {
       padding: 0.3rem 0.2rem 0.2rem 0.2rem;
     }
     .infos-content {
       background: #fff;
       padding: 8px;
       border-radius: 6px 6px 0 0;
       box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
     }
     .van-cell__title{
       font-size:0.3rem;
     }
     .van-cell__value{
       font-size: 0.3rem;
     }
     h5 {
       margin: 0;
       padding: 10px;
       font-weight: bold;
       font-size:0.3rem;
       color: #333;
     }
     .search-box {
       display: flex;
       align-items: center;
     }
   }
   </style>